

<form class="form-horizontal">
    <div class="form-group" ng-class="{'has-error' : errors.username}">
        <label class="col-sm-3 control-label">username <br><em><small class="help-block">semi-optional</small></em></label>
        <div class="col-sm-6">
            <input ng-model="consumer.username" class="form-control">
            <div class="text-danger" ng-if="errors.username" data-ng-bind="errors.username"></div>
            <p class="help-block">The username of the consumer. You must send either this field or <code>custom_id</code> with the request.</p>
        </div>
    </div>

    <div class="form-group" ng-class="{'has-error' : errors.custom_id}">
        <label class="col-sm-3 control-label">custom_id <br><em><small class="help-block">semi-optional</small></em></label>
        <div class="col-sm-6">
            <input ng-model="consumer.custom_id" class="form-control">
            <div class="text-danger" ng-if="errors.custom_id" data-ng-bind="errors.custom_id"></div>
            <p class="help-block">Field for storing an existing ID for the consumer, useful for mapping Kong with users in your existing database. You must send either this field or <code>username</code> with the request.</p>
        </div>
    </div>

    <div class="form-group" ng-if="isGatewayVersionEqOrGreater('1.1.0-rc1')">
        <label class="col-sm-3 control-label">Tags <br><em>
            <small class="help-block">optional</small>
        </em></label>
        <div class="col-sm-6">
            <chips ng-model="consumer.tags">
                <chip-tmpl>
                    <div class="default-chip">
                        {{chip}}
                        <i class="mdi mdi-close" remove-chip></i>
                    </div>
                </chip-tmpl>
                <input ng-model-control
                       data-ng-keypress="onTagInputKeyPress($event)"
                       ng-model="$tag" uib-typeahead="tag for tag in tags | filter:$viewValue | limitTo:10"/>
            </chips>
            <p class="help-block">
                Optionally add tags to the consumer
            </p>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-6">
            <button type="button" class="btn btn-primary" ng-click="updateConsumerDetails()">
                <i class="mdi mdi-check"></i>
                Submit Changes
            </button>
        </div>
    </div>
</form>